<!--
 * 预警详情
-->
<template>
  <div class="wanning-detail">
    <div class="wanning-detail__header">预警详情</div>
    <div class="wanning-detail__content">
      <div class="wanning-detail__content--tips">预警等级：{{ getDictLabel('riskLevel', detail.riskLevel) }}</div>
      <div class="wanning-detail__content--tips">预警原因：<el-link :underline="false" type="danger">{{ detail.warnMessage
          }}</el-link> </div>
      <div class="wanning-detail__content--infos">
        <div class="item-wrapper">
          <div class="label">订单编号：</div>
          <div class="value">{{ detail.orderId }}</div>
        </div>
        <div class="item-wrapper">
          <div class="label">手机号：</div>
          <div class="value">{{ detail.mobile }}</div>
        </div>
        <div class="item-wrapper">
          <div class="label">昵称：</div>
          <div class="value">{{ detail.nickName }}</div>
        </div>
        <div class="item-wrapper">
          <div class="label">规则名称：</div>
          <div class="value">{{ getDictLabel('riskRuleType', detail.ruleType) }}</div>
        </div>

        <template v-if="userInfo.userType == '1'">
          <div class="item-wrapper">
            <div class="label">商品名称：</div>
            <div class="value">{{ detail.goodsName || '-' }}</div>
          </div>
          <div class="item-wrapper">
            <div class="label">实付金额：</div>
            <div class="value">{{ detail.totalMoney }}</div>
          </div>
           <div class="item-wrapper">
            <div class="label">触发预警数量：</div>
            <div class="value">{{ detail.currentNum }}</div>
          </div>
        </template>

        <template v-else>
          <div class="item-wrapper">
            <div class="label">订单金额：</div>
            <div class="value">{{ detail.totalMoney }}</div>
          </div>
          <div class="item-wrapper">
            <div class="label">商品名称：</div>
            <div class="value">{{ detail.goodsName || '-' }}</div>
          </div>
          <div class="item-wrapper">
            <div class="label">触发预警数量：</div>
            <div class="value">{{ detail.currentNum }}</div>
          </div>
          <div class="item-wrapper">
            <div class="label">实付款：</div>
            <div class="value">{{ detail.totalMoney }}</div>
          </div>
        </template>

        <div class="item-wrapper">
          <div class="label">店铺名称：</div>
          <div class="value">{{ detail.storeName }}</div>
        </div>
        <div class="item-wrapper">
          <div class="label">所属大区：</div>
          <div class="value">{{ detail.upOrgZone }}</div>
        </div>
        <div class="item-wrapper">
          <div class="label">所属营销区域</div>
          <div class="value">{{ detail.baseName }}</div>
        </div>
        <div class="item-wrapper">
          <div class="label">预警时间</div>
          <div class="value">{{ detail.updateTime || '-' }}</div>
        </div>
      </div>

      <el-divider content-position="left">订单支付信息</el-divider>
      <div class="table2">
        <el-table ref="table2" key="table2" tooltip-effect="dark" style="width: 100%" :data="orderInfo" border
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
          <el-table-column prop="payMethod" label="支付类型" align="center" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.payMethod == 0">云店线下</span>
              <span v-if="scope.row.payMethod == 1">线上支付</span>
              <span v-if="scope.row.payMethod == 2">pos线下支付</span>
              <span v-if="scope.row.payMethod == 3">微信</span>
              <span v-if="scope.row.payMethod == 4">支付宝</span>
              <span v-if="scope.row.payMethod == 5">银行卡</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalMoney" label="订单原价" align="center" width="120"
            :formatter="fixData"></el-table-column>
          <el-table-column prop="couponType" label="通用券类型" align="center" width="120"
            :formatter="couponType"></el-table-column>
          <el-table-column prop="couponName" label="券属性" align="center" show-overflow-tooltip
            :formatter="couponDetail"></el-table-column>
          <el-table-column prop="couponDeductMoney" label="通用券抵扣金额" align="center" width="120"
            :formatter="fixData"></el-table-column>
          <el-table-column prop="discountMoney" label="定向券抵扣金额" align="center" width="120"
            :formatter="fixData"></el-table-column>
          <el-table-column prop="payMoney" label="订单实付金额" align="center" width="120"
            :formatter="fixData"></el-table-column>
          <el-table-column prop="payTime" label="支付时间" align="center" width="200"
            show-overflow-tooltip></el-table-column>
          <el-table-column prop="payStatus" label="支付状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.payStatus == 0 && scope.row.returnStatus == 0">待支付</span>
              <span v-if="scope.row.payStatus == 1 && scope.row.returnStatus == 0">已支付</span>
              <span v-if="scope.row.returnStatus != 0">已退款</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--商品列表-->
      <el-divider content-position="left">订单商品信息</el-divider>
      <div class="table3">
        <el-table ref="table3" key="table3" tooltip-effect="dark" style="width: 100%"
          :data="shopInfo" border :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
          <el-table-column prop="goodsSeq" label="商品编号" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="goodsStyle" label="商品类型" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.goodsStyle == 1">普通商品</span>
              <span v-if="scope.row.goodsStyle == 2">宴席商品</span>
              <span v-if="scope.row.goodsStyle == 3">生日专属商品</span>
            </template>
          </el-table-column>
          <el-table-column prop="goodsPic" label="商品图片" align="center" width="120">
            <template slot-scope="scope">
              <img :src="scope.row.goodsPicUrl" v-if="scope.row.goodsPicUrl != '' && scope.row.goodsPicUrl != null" width="70"
                height="50" />
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="购买数量" align="center" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="minAmount" label="折算瓶数" align="center" width="120"></el-table-column>
          <el-table-column prop="oldMoney" label="商品原价" align="center" width="120"
            :formatter="fixData"></el-table-column>
          <el-table-column prop="memberMoney" label="商品会员价" align="center" width="120"
            :formatter="fixData"></el-table-column>
          <el-table-column prop="couponNum" label="券数量" align="center" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.couponNum <= 0">—</span>
              <span v-if="scope.row.couponNum > 0">
                <el-button size="mini" @click="showCouponDetail(scope.row)" type="text">{{ scope.row.couponNum
                  }}</el-button>
              </span>
            </template>
          </el-table-column>
          <el-table-column type="expand" width="1">
            <template slot-scope="props">
              <div id="couponDetail" style="width:600px;">
                <div style="margin:0 10px 10px 0">卡券详情</div>
                <el-table ref="couponTable" tooltip-effect="dark" :data="props.row.coupouList" width="100%">
                  <el-table-column prop="goodsName" label="商品名称" align="center" width="150" show-overflow-tooltip>
                    <template>
                      <span>{{ props.row.goodsName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="couponType" label="定向券类型" align="center" width="150"
                    :formatter="couponType"></el-table-column>
                  <el-table-column prop="couponName" label="券属性" align="center" width="150" show-overflow-tooltip
                    :formatter="couponDetail"></el-table-column>
                  <el-table-column prop="couponMoney" label="抵扣金额" align="center" width="150"
                    :formatter="fixData"></el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="discount" label="抵扣金额" align="center" width="120"
            :formatter="fixData"></el-table-column>
          <el-table-column prop="realMoney" align="center" width="120"
            :formatter="fixData">
            <template slot="header" slot-scope="scope">
              {{ orderDetail.returnStatus == 0 ? '商品实付金额' : '退款金额' }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wanning-detail__footer">
      <el-button type="primary" @click="$router.back()">返回</el-button>
    </div>
  </div>
</template>

<script>
import { getDictLabel } from '@/dict';
import { queryOrderByNo } from '@/api/warningManager';
export default {
  data() {
    return {
      getDictLabel,
      detail: {},
      userInfo: {},
      orderInfo: [],
      orderDetail: {},
      shopInfo: [],
      loading: false
    }
  },
  created() {
    const logininfo = localStorage.getItem('logininfo') || '{}';
    this.userInfo = JSON.parse(logininfo);
    if (this.$route.params.info) {
      this.detail = this.$route.params.info;

      if (this.detail.orderId) {
        queryOrderByNo({
          orderNo: this.detail.orderId
        }).then(res => {
          if (res.code == 1) {
            this.orderDetail = res.result;
            this.orderInfo = [res.result];
            this.shopInfo = res.result.items;
          }
          console.log('~🚀🚀🚀🚀~🚀🚀🚀🚀~🚀🚀🚀🚀~ ~ res:', res);
        });
      }
    }
  },
  methods: {
    //数字格式化
    fixData(row, column, cellValue, index) {
      if (cellValue != null && !isNaN(cellValue)) {
        if (cellValue < 0) {
          return '0.00';
        } else {
          return cellValue.toFixed(2);
        }
      } else {
        return '—';
      }
    },
    //卡券类型格式化
    couponType(row, column, cellValue, index) {
      if (row.couponId != null && row.couponId != '') {
        return '通用券';
      } else {
        return '—';
      }
    },
    //卡券属性格式化
    couponDetail(row, column, cellValue, index) {
      if (row.couponId != null && row.couponId != '') {
        return '满' + row.couponLimitMoney + '减' + row.couponMoney;
      } else {
        return '—';
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.wanning-detail {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: inherit;
  width: 100%;

  &__header {
    font-size: 16px;
    font-weight: 600;
  }

  &__content {
    flex: 1;
    overflow: auto;

    &--tips {
      &:first-child {
        margin-bottom: 15px;
      }
    }

    &--infos {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px 10px;
      margin-top: 15px;

      .item-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: 32px;
        color: #606266;
        font-size: 14px;

        .label {
          width: 128px;
          text-align: right;
        }

        .value {
          flex: 1;
          height: 32px;
          line-height: 32px;
          padding: 0 10px;
          background-color: #fff;
          border-radius: 4px;
          border: 1px solid #dcdfe6;
        }
      }
    }
  }
}
</style>